<template>
<div class="login-main">
    <div class="login-bg">
            <img src="../assets/images/bg.png" alt="">
        <canvas class="background"></canvas>
<!--        <h1>归途房产销售管理系统</h1>-->
    </div>
    <div class="login-top">


        <div class="login-form loader">
            <div class="face">
                <div class="circle"></div>
            </div>
            <div class="face">
                <div class="circle"></div>
            </div>
            <div class="login-form-bg">
                <img src="../assets/images/logo3.png" alt />
            </div>

            <form class="login-form-content">
                <h2 class="login-title">归途房产销售管理系统</h2>

                <div :class="[loginerror ? 'loginerror' : 'loginsuccess', 'logintips']">
                    <span>{{ logintips }}</span>
                </div>
                <div class="user-name-item">
                    <label for="username">
                        <span class="iconfont icon-zhanghaodenglu"></span>
                    </label>
                    <input :class="[nameiswarn ? 'warning' : 'normal', 'userinput']" type="text" id="username" v-model="user.admin_account" placeholder="请输入账号" />
                    <span v-if="nameiswarn && user.admin_account.trim() === ''" class="userTips">账号不能为空</span>
                </div>
                <div class="user-pwd-item">
                    <label for="userpwd">
                        <span class="iconfont icon-mima"></span>
                    </label>
                    <input autocomplete="off" placeholder="请输入密码" :class="[pwdiswarn ? 'warning' : 'normal', 'userinput',islook?'islookpwd':'']" :type="pwdType" id="userpwd" v-model="user.admin_pwd" />
                    <span class="islook" @click="changeLook">
                        <span v-if="islook" class="iconfont icon-mimakejian"></span>
                        <span v-else class="iconfont icon--bukejian-"></span>
                    </span>

                    <span v-if="pwdiswarn && user.admin_pwd.trim() === ''" class="userTips">密码不能为空</span>
                </div>
                <div class="user-verty-item">
                    <label for="verty">
                        <span class="iconfont icon-yanzhengma2"></span>
                    </label>
                    <input :class="[vertyiswarn ? 'warning' : 'normal', 'userinput']" type="text" id="verty" v-model="user.verty" placeholder="请输入验证码" />
                    <div class="verty-img" @click="verifycode">
                        <img :src="serverVerify" alt />
                    </div>
                    <span v-if="nameiswarn && user.verty.trim() === ''" class="userTips" @blur="verifycode">请输入验证码</span>
                </div>
                <button @click="login" class="login-btn" type="button">登录</button>
            </form>
        </div>
    </div>
</div>
</template>

<script>
import Particles from "particlesjs";
import * as api from "../utils/api";

export default {
    name: "Login",
    data() {
        return {
            islook: false,
            user: {
                admin_account: "",
                admin_pwd: "",
                verty: "",
            },
            serverVerify: "",
            pwdType: "password",
            eyeType: "eye",
            nameiswarn: false,
            pwdiswarn: false,
            vertyiswarn: false,
            loginerror: false,
            logintips: "账号正确马上跳转",
        };
    },

    methods: {
        changeLook() {
            this.islook = !this.islook;
            this.pwdType = this.pwdType === "password" ? "text" : "password";
            this.eyeType = this.eyeType === "eye" ? "eye-open" : "eye";
        },
        logincheck() {
            this.user.admin_account.trim() === "" ?
                (this.nameiswarn = true) :
                (this.nameiswarn = false);
            this.user.admin_pwd.trim() === "" ?
                (this.pwdiswarn = true) :
                (this.pwdiswarn = false);
        },
        login() {
            //判断是否为空
            this.logincheck();
            if (!this.pwdiswarn && !this.nameiswarn) {
                this.$store
                    .dispatch("loginAction", this.user)
                    .then((data) => {
                        console.log(data);
                        this.$router.push("/Home");
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loginerror = true;
                        this.logintips = err.msg;
                    });
            }
        },
        //请求登录。
        verifycode() {
            //验证防机器人
            console.log("获取验证码");
            this.axios
                .post(
                    api.POST_verification, {}, {
                        responseType: "arraybuffer",
                    }
                )
                .then((res) => {
                    return (
                        "data:image/png;base64," +
                        btoa(
                            new Uint8Array(res.data).reduce(
                                (data, byte) => data + String.fromCharCode(byte),
                                ""
                            )
                        )
                    );
                })
                .then((data) => {
                    console.log(data);
                    this.serverVerify = data;
                    /*   _this.previewImage = data //图片地址 <img src='data' />*/
                    console.log(data);
                });
        },
    },
    created() {
        this.verifycode();
    },
};
</script>

<style lang="less">
@import "../assets/SysIconfont/iconfont.css";
</style><style lang="less" scoped>
h1 {
    position: absolute;
    z-index: 3;
    width: 40%;
    font-size: 44px;
    text-align: center;
    margin: 100px 40px;
}

.background {
    position: absolute;

    display: block;

    top: 0;

    left: 0;

    z-index: 0;
}

.login-main {
    overflow: hidden;
  padding-top: 0px;
    position: relative;
    // width: 100vw;
    height: 100vh;
    color: #727272;

    h2 {
        position: relative;
    }

    h2.login-title {
          margin-bottom: 3rem;
        color:white;
        height: 3rem;
        font-size: 22px;
        font-weight: initial;
        text-align: center;
        line-height: 3rem;
    }
}
.login-top{
    width: 100%;
    position: relative;
}
.login-bg {
  /*  background-color: #8c8e96;*/
    position: absolute;
    z-index: -1;
    top:0;

    opacity: 1;

    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-height: 700px;

    >img {
        width: 100%;
        height: 100%;

    }
}

.login-form {
    margin: 8.9% auto 0;
    transition: all 0.4s;
    box-sizing: border-box;
    background-color: rgba(0, 30, 40, 0.5);
    overflow: hidden;
 /*   position: absolute;
    z-index: 2;
    left: 20%;
    top: 150px;*/
    width: 42rem;

    height: 42rem;
    padding: 40px;
    box-shadow: 0 4rem 85px rgba(0, 57, 77, 0.93);
    border-radius: 30rem;



    .iconfont {
        font-size: 20px;
        margin: 0 10px;
        color: #ffffff;
    }

    .login-form-bg {
        position: absolute;
        z-index: -1;
        bottom:0;
        width: 20%;
        margin: 1rem auto;
        background-repeat: no-repeat;
        height: 20%;
        opacity: .6;
        overflow: hidden;

        img {
            width: 100%;

        }
    }

    .login-form-content {
        position: absolute;
        z-index: 9;
        width: 70%;
        height: 70%;

        >div {
            display: flex;
            justify-content: space-between;
            padding: 0;
        }

        >div:not(:nth-of-type(1)) {
            position: relative;
            margin: 25px 0;
        }
//提示
        >div:nth-of-type(1) {
            position: absolute;
            width: 100%;
            box-sizing: border-box;
            left: 0px;
            top: 120px;
           /* padding-left: 60px;*/

            &.logintips {
                color: tomato;
                display: none;
            }

            &.logintips.loginerror {
                display: block;
                text-align: center;
            }
        }

        label {
            text-align-last: justify;
            /*    letter-spacing: 8px;*/
            color: #9b9ca5;
            display: inline-block;
            width: 10%;
            text-align: left;
            margin-right: 20px;
            font-size: 16px;
            height: 48px;
            line-height: 48px;
            background-color: rgba(255, 255, 255, 0);
            box-sizing: border-box;
            position: absolute;
            z-index: 2;
            left: 20px;


        }

        input {
            color: white;
            margin: 0 auto;
            font-size: 16px;
            box-sizing: border-box;
            background-color: rgba(0, 32, 43, 0.23);
            border: none;
            border-bottom: 2px solid rgba(238, 241, 250, 0);
            width: 90%;
            height: 48px;

            transition: all 0.4s;
            outline: none;
            padding: 8px 80px 8px 80px;
            border-radius: 12px 12px 0 0;
            line-height: 48px;

            &:hover {
                border-bottom: 2px solid rgba(246, 167, 80, 1);
            }

            &#userpwd {
                letter-spacing: 8px;

                &.islookpwd {
                    letter-spacing: 0px;
                }
            }

           /* &#verty {
                width: 55%;
            }*/
        }

        input::-webkit-input-placeholder {
            text-align: center;
            font-size: 14px;
            color: rgba(235, 235, 235, 0.62);
            padding: 8px;
            letter-spacing: 2px;
        }

        .verty-img {
            position: absolute;
            z-index: 2;
            right: -1rem;
            width: 10rem;
            height: 48px;
            overflow: hidden;

            img {
                width: 8rem;
                height: 46px;

            }
        }

        .logo-login {

            width: 40px;
            height: 40px;
            position: absolute;
            left: 100px;
            top: 40px;
        }

        .islook {
            position: absolute;
            right: 40px;
            top: 20px;
        }
    }
}

input.userinput {}

input.warning {
    border-bottom: 2px solid rgba(189, 0, 0, 0.69);

    outline: none;
}

.login-btn {
    display: block;
    border: none;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    font-size: 24px;
    transition: all 0.2s;
    cursor: pointer;
    border-bottom: 2px solid rgba(238, 241, 250, 0);
    color: white;

    &:hover {
        width: 60%;
        color: #0089ca;
        border-bottom: 2px solid #f6a750;
    }
}

.userTips {
    position: absolute;
    z-index: 1;
    left: 100px;
    bottom: -20px;
    color: red;
    font-size: 14px;
}

.loader {

    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}
.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: #73d3ca;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}
.loader .face:nth-child(2) {
    width: 80%;
    height: 80%;
    color:  #0086cc;

    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
}
.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}
.loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content:'';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
}
@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}
</style>
